<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <button class="getbook">
        获取所有书籍的简介
    </button>
    <input value="史上最强赘婿" type="text" class="getchapter" placeholder="输入书籍名，获取章节">

    <ul>

    </ul>
</body>
<script>
    $(function () {
        $(".getbook").click(function () {
            $.ajax({
                url: 'http://localhost:3000/allbook',
                type: 'get',
                // 设置的是请求参数
                data: {
                    id: 1,
                    name: '张三'
                },
                // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                dataType: 'json',
                success: function (res) {
                    $("ul").html("")
                    res.data.forEach(item => {
                        let li = `<li>${item.book_min_describe}</li>`
                        $("ul").append(li)
                    });

                }
            })

        })



        $(".getchapter").keydown(function (e) {
            if (e.keyCode == 13) {
               
                let book_title=$(".getchapter").val()
                $.ajax({
                url: 'http://localhost:3000/book/chapters',
                type: 'get',
                // 设置的是请求参数
                data: {
                    book_title: book_title,
                },
                dataType: 'json',
                success: function (res) {
                    $("ul").html("")
                    res.data.forEach(item => {
                        let li = `<h2>${item.book_title}----${item.chapter_title}</h2><li>${item.chapter_content}</li>`
                        $("ul").append(li)
                    });

                }
            })
            }
        })
    })
</script>

</html>